<template>
    <BasicModal
      v-bind="$attrs"
      ref="modal"
      title="图形统计表"
      @register="registerModal"
      show-footer
      :can-fullscreen="false"
      width="80%"
    >
      <template #footer>
        <a-button @click="closeModal">关闭</a-button>
      </template>
      <BasicForm @register="registerForm" @submit="handleSubmit">
        </BasicForm>
      <div ref="powerChartRef" :style="{ height: '300px', width: '100%' }"></div>
      <div ref="inputChartRef" :style="{ height: '300px', width: '100%' }"></div>
      <div ref="useChartRef" :style="{ height: '300px', width: '100%' }"></div>
    </BasicModal>
  </template>
  <script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref, Ref } from 'vue';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { useECharts } from '@/hooks/web/useECharts';
  import { defHttp } from '@/utils/http/axios';
  const modal = ref<any>();
  const [registerModal, { closeModal, changeLoading }] =
  useModalInner(async (data) => {
    resetFields();
    setFieldsValue({stationId: 16})
    setTimeout(() => {
      getData();
    }, 1000);
  });
  const [
    registerForm,
    { getFieldsValue, resetFields, setFieldsValue, validate },
  ] = useForm({
    showActionButtonGroup: true,
    labelWidth: 100,
    schemas: [
        {
            component: 'ApiSelect',
            label: '电站',
            field: 'stationId',
            componentProps: {
                api: '/admin/main/stationList',
                labelField: 'name',
                valueField: 'id',
                showSearch: true,
                allowClear: true,
                placeholder: '请选择电站',
            }
        },
        {
            component: 'RangePicker',
            label: '日期',
            field: '[startTime, endTime]',
            componentProps: {
                format: 'YYYY-MM-DD 00:00:00',
                placeholder: ['开始日期', '结束日期'],
            }
        }
    ],
    baseColProps: { span: 12 },
  });
  const powerChartRef = ref<HTMLDivElement | null>(null);
  const inputChartRef = ref<HTMLDivElement | null>(null);
  const useChartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(powerChartRef as Ref<HTMLDivElement>);
  const { setOptions: setInputOptions, getInstance: getInputInstance } = useECharts(inputChartRef as Ref<HTMLDivElement>);
  const { setOptions: setUseOptions, getInstance: getUseInstance } = useECharts(useChartRef as Ref<HTMLDivElement>);

  const getData = () => {
    getPowerData();
    getInputChartData();
    getUseChartData();
  }
  const getPowerData = async () => {
    getInstance()?.showLoading();
    let res = {} as any;
    try {
        res = await defHttp.get({
            url: '/statistic/pilePower',
            params: { ...getFieldsValue()}
        });
    } finally {
        getInstance()?.hideLoading();
    }
    const { pileDataList, powerDataList } = res;
    setOptions(
        {
          title: {
            text: '电桩电量报表'
          },
          xAxis: {
            type: 'category',
            name: '电桩',
            boundaryGap: false,
            data: pileDataList
        },
        yAxis: {
            type: 'value',
            name: '电度数(kWh)'
        },
        series: [
            {
              data: powerDataList,
              name: '累计充电量',
              type: 'line',
              areaStyle: {}
            }
        ]
    })
  };
  const getInputChartData = async () => {
    getInputInstance()?.showLoading();
    let res = {} as any;
    try {
        console.log(getFieldsValue())
        res = await defHttp.get({
            url: '/statistic/pileProfit',
            params: { ...getFieldsValue()}
        });
    } finally {
      getInputInstance()?.hideLoading();
    }
    const { pileDataList, powerDataList } = res;
    setInputOptions(
        {
          title: {
            text: '电桩收益报表（年/月）'
          },
          xAxis: {
            type: 'category',
            name: '电桩',
            boundaryGap: false,
            data: pileDataList
        },
        yAxis: {
            type: 'value',
            name: '收益(元)'
        },
        series: [
            {
              data: powerDataList,
              name: '累计收益',
              type: 'line',
              areaStyle: {}
            }
        ]
    })
  }
  const getUseChartData = async () => {
    getUseInstance()?.showLoading();
    let res = {} as any;
    try {
        console.log(getFieldsValue())
        res = await defHttp.get({
            url: '/statistic/pileUse',
            params: { ...getFieldsValue()}  
        });
    } finally {
      getUseInstance()?.hideLoading();
    }
    const { pileDataList, orderDataList, userDataList } = res;
    setUseOptions(
        {
          title: {
            text: '电桩使用情况分析'
          },  
          legend: {
            data: ['累计订单总数', '累计用户数']
          },
          xAxis: {
            type: 'category',   
            name: '电桩',
            boundaryGap: false,
            data: pileDataList
          },
          yAxis: {
            type: 'value',
            name: '使用率(%)'
          },
          series: [
            {
              name: '累计订单总数',
              type: 'line',
              data: orderDataList
            },
            {
              name: '累计用户数',
              type: 'line',
              data: userDataList
            }
          ]
        }
    )
  }
  const handleSubmit = async () => {
    getData();
  };
  
  
</script>
  